<template>
	<view class="page-container">
		<!-- 顶部导航栏（统一u-navbar组件样式） -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pageNew/pages/salary/index" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">查看工资单</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区（统一容器宽度与内边距） -->
		<view class="content-container">
			<!-- 工资单详情卡片（统一卡片阴影与圆角） -->
			<view class="form-card mb-4">
				<!-- 员工信息与状态 -->
				<view class="flex items-center justify-between mb-4">
					<text class="text-lg font-medium">{{ salarySlip.employeeName }}</text>
					<text class="px-2 py-1 rounded text-xs" :class="statusClasses[salarySlip.status]">
						{{ getStatusText(salarySlip.status) }}
					</text>
				</view>

				<!-- 基础信息列表（统一标签-值布局） -->
				<view class="form-section mb-6">
					<view class="form-row">
						<view class="form-label">工号:</view>
						<view class="form-value">{{ salarySlip.employeeId }}</view>
					</view>
					<view class="form-row">
						<view class="form-label">部门:</view>
						<view class="form-value">{{ salarySlip.department }}</view>
					</view>
					<view class="form-row">
						<view class="form-label">职位:</view>
						<view class="form-value">{{ salarySlip.position }}</view>
					</view>
					<view class="form-row">
						<view class="form-label">发放月份:</view>
						<view class="form-value">{{ salarySlip.month }}</view>
					</view>
				</view>

				<!-- 工资明细区域（优化网格布局与间距） -->
				<view class="mb-6">
					<text class="section-title">工资明细</text>
					<view class="salary-detail-card p-3 mt-2">
						<!-- 收入部分（双列网格布局布局） -->
						<view class="grid grid-cols-2 gap-3 mb-3">
							<view class="flex justify-between">
								<text class="text-sm text-gray-500">基本工资:</text>
								<text class="text-sm">¥{{ formatCurrency(salarySlip.baseSalary) }}</text>
							</view>
							<view class="flex justify-between">
								<text class="text-sm text-gray-500">绩效工资:</text>
								<text class="text-sm">¥{{ formatCurrency(salarySlip.performanceSalary) }}</text>
							</view>
							<view class="flex justify-between">
								<text class="text-sm text-gray-500">津贴补贴:</text>
								<text class="text-sm">¥{{ formatCurrency(salarySlip.allowance) }}</text>
							</view>
							<view class="flex justify-between">
								<text class="text-sm text-gray-500">加班费:</text>
								<text class="text-sm">¥{{ formatCurrency(salarySlip.overtimePay) }}</text>
							</view>
							<view class="flex justify-between pt-2 border-t border-gray-200 col-span-2">
								<text class="text-sm font-medium">应发工资:</text>
								<text
									class="text-sm font-medium">¥{{ formatCurrency(this.calculateGrossSalary()) }}</text>
							</view>
						</view>

						<!-- 扣除部分（单列布局） -->
						<view>
							<view class="flex justify-between">
								<text class="text-sm text-gray-500">社会保险:</text>
								<text class="text-sm">-¥{{ formatCurrency(salarySlip.socialSecurity) }}</text>
							</view>
							<view class="flex justify-between mt-2">
								<text class="text-sm text-gray-500">住房公积金:</text>
								<text class="text-sm">-¥{{ formatCurrency(salarySlip.housingFund) }}</text>
							</view>
							<view class="flex justify-between mt-2">
								<text class="text-sm text-gray-500">个人所得税:</text>
								<text class="text-sm">-¥{{ formatCurrency(salarySlip.incomeTax) }}</text>
							</view>
							<view class="flex justify-between pt-2 mt-2 border-t border-gray-200">
								<text class="text-sm font-medium">实发工资:</text>
								<text
									class="text-sm font-medium text-primary">¥{{ formatCurrency(salarySlip.netSalary) }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 备注区域（统一文本样式） -->
				<view class="mb-6">
					<text class="section-title">备注:</text>
					<text class="text-sm text-gray-700 mt-2 block">{{ salarySlip.remark || '无' }}</text>
				</view>

				<!-- 功能操作按钮（统一按钮样式与间距） -->
				<view class="form-actions salary-actions">
					<button class="submit-button flex items-center justify-center" @click="handleSalaryAction"
						v-if="salarySlip.status === 'pending'">
						<text class="fa fa-money mr-2"></text>发放工资
					</button>
					<button class="secondary-button flex items-center justify-center" @click="exportSalarySlip"
						v-if="salarySlip.status !== 'archived'">
						<text class="fa fa-download mr-2"></text>导出工资单
					</button>
				</view>
			</view>
		</view>

		<!-- 底部固定操作按钮区域 -->
		<view class="fixed-bottom-buttons">
			<button class="btn edit-btn" @click="editSalarySlip">
				<text class="fa fa-pencil mr-2"></text>编辑
			</button>
			<button class="btn delete-btn" @click="deleteSalarySlip">
				<text class="fa fa-trash mr-2"></text>删除
			</button>
		</view>

		<!-- 删除确认弹窗（统一弹窗样式） -->
		<view id="deleteModal" class="modal-container" :class="{ 'hidden': !showDeleteModal }">
			<view class="modal-content">
				<view class="modal-header border-b border-gray-200 pb-3">
					<text class="modal-title text-base font-medium">确认删除</text>
				</view>
				<view class="modal-body py-4">
					<text class="modal-text text-sm text-gray-700">您确定要删除这张工资单记录吗？删除后将无法恢复。</text>
				</view>
				<view class="modal-footer flex justify-end gap-2 pt-2 border-t border-gray-200">
					<button class="cancel-button px-4 py-2 text-sm" @click="toggleDeleteModal">取消</button>
					<button class="danger-button px-4 py-2 text-sm" @click="confirmDelete">删除</button>
				</view>
			</view>
		</view>

		<!-- 操作确认弹窗（统一弹窗交互） -->
		<view id="actionModal" class="modal-container" :class="{ 'hidden': !showActionModal }">
			<view class="modal-content">
				<view class="modal-header border-b border-gray-200 pb-3">
					<text class="modal-title text-base font-medium">{{ actionType === 'pay' ? '确认发放' : '确认归档' }}</text>
				</view>
				<view class="modal-body py-4">
					<text class="modal-text text-sm text-gray-700">
						{{ actionType === 'pay' ? '您确定要发放这张工资单吗？' : '您确定要归档这张工资单吗？' }}
					</text>
				</view>
				<view class="modal-footer flex justify-end gap-2 pt-2 border-t border-gray-200">
					<button class="cancel-button px-4 py-2 text-sm" @click="toggleActionModal">取消</button>
					<button
						:class="actionType === 'pay' ? 'submit-button px-4 py-2 text-sm' : 'secondary-button px-4 py-2 text-sm'"
						@click="confirmAction">
						{{ actionType === 'pay' ? '发放' : '归档' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 工资单数据（默认值与接口数据兼容）
				salarySlip: {},
				// 删除确认弹窗状态
				showDeleteModal: false,
				// 操作确认弹窗状态与类型
				showActionModal: false,
				actionType: 'pay' // 'pay'=发放，'archive'=归档
			};
		},
		onLoad(options) {
			console.log('查看工资单页面加载完成，参数:', options);
			// 获取工资单ID并加载数据
			const slipId = options.id;
			this.loadSalarySlipData(slipId);
		},
		computed: {
			// 工资单状态样式映射（统一状态色值）
			statusClasses() {
				return {
					'pending': 'bg-yellow-100 text-yellow-800',
					'completed': 'bg-green-100 text-green-800',
					'archived': 'bg-gray-100 text-gray-800'
				};
			}
		},
		methods: {
			// 加载工资单数据（兼容本地存储与接口）
			loadSalarySlipData(slipId) {
				// 优先从本地存储获取
				let salarySlips = uni.getStorageSync('salarySlips') || [];
				const foundSlip = salarySlips.find(slip => slip.id === slipId);

				if (foundSlip) {
					this.salarySlip = foundSlip;
				} else {
					// 本地无数据时使用默认值
					this.salarySlip = {
						id: '1',
						employeeId: 'EMP001',
						employeeName: '张三',
						department: '技术部',
						position: '高级开发工程师',
						month: '2024-10',
						baseSalary: 15000.00,
						performanceSalary: 3000.00,
						allowance: 1000.00,
						overtimePay: 500.00,
						socialSecurity: 1200.00,
						housingFund: 1800.00,
						incomeTax: 450.00,
						netSalary: 16050.00,
						status: 'pending',
						remark: '10月绩效优秀，加班费含国庆3倍薪资',
						createdAt: '2024-10-30T10:00:00',
						updatedAt: '2024-10-30T10:00:00'
					};
				}
			},

			// 获取工资状态文本（统一状态描述）
			getStatusText(status) {
				const statusMap = {
					'pending': '待发放',
					'completed': '已发放',
					'archived': '已归档'
				};
				return statusMap[status] || status;
			},

			// 格式化货币（保留2位小数+千位分隔符）
			formatCurrency(amount) {
				return parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},

			// 计算应发工资（自动求和收入项）
			calculateGrossSalary() {
				const {
					baseSalary,
					performanceSalary,
					allowance,
					overtimePay
				} = this.salarySlip;
				return (
					parseFloat(baseSalary || 0) +
					parseFloat(performanceSalary || 0) +
					parseFloat(allowance || 0) +
					parseFloat(overtimePay || 0)
				).toFixed(2);
			},

			// 编辑工资单（跳转编辑页并传参）
			editSalarySlip() {
				uni.navigateTo({
					url: `/pageNew/pages/salary/edit?id=${this.salarySlip.id}`
				});
			},

			// 打开删除确认弹窗
			deleteSalarySlip() {
				this.showDeleteModal = true;
			},

			// 关闭删除确认弹窗
			toggleDeleteModal() {
				this.showDeleteModal = false;
			},

			// 确认删除工资单（更新本地存储）
			confirmDelete() {
				let salarySlips = uni.getStorageSync('salarySlips') || [];
				// 过滤删除项
				salarySlips = salarySlips.filter(slip => slip.id !== this.salarySlip.id);
				// 保存到本地
				uni.setStorageSync('salarySlips', salarySlips);
				// 关闭弹窗+提示+返回列表
				this.showDeleteModal = false;
				uni.showToast({
					title: '工资单删除成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500);
			},

			// 打开操作确认弹窗（区分发放/归档）
			handleSalaryAction() {
				this.actionType = this.salarySlip.status === 'pending' ? 'pay' : 'archive';
				this.showActionModal = true;
			},

			// 关闭操作确认弹窗
			toggleActionModal() {
				this.showActionModal = false;
			},

			// 确认操作（更新工资单状态）
			confirmAction() {
				let salarySlips = uni.getStorageSync('salarySlips') || [];
				const index = salarySlips.findIndex(slip => slip.id === this.salarySlip.id);

				if (index !== -1) {
					// 更新状态与时间
					salarySlips[index].status = this.actionType === 'pay' ? 'completed' : 'archived';
					salarySlips[index].updatedAt = new Date().toISOString();
					// 保存到本地
					uni.setStorageSync('salarySlips', salarySlips);
					// 更新页面数据
					this.salarySlip.status = this.actionType === 'pay' ? 'completed' : 'archived';
					this.salarySlip.updatedAt = new Date().toISOString();
				}

				// 关闭弹窗+提示
				this.showActionModal = false;
				uni.showToast({
					title: this.actionType === 'pay' ? '工资发放成功' : '工资归档成功',
					icon: 'success'
				});
			},

			// 导出工资单（模拟导出逻辑）
			exportSalarySlip() {
				uni.showToast({
					title: '正在导出工资单...',
					icon: 'loading',
					duration: 2000
				});
				setTimeout(() => {
					uni.showToast({
						title: '工资单导出成功',
						icon: 'success'
					});
					// 实际项目中可添加下载文件逻辑（如调用后端接口生成PDF）
				}, 2000);
			}
		}
	};
</script>

<style scoped>
	/* 全局容器（统一页面背景、高度与字体） */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	}

	/* 导航栏样式（对齐u-navbar组件风格） */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	/* 内容容器（统一宽度、居中与内边距） */
	.content-container {
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 80px;
		/* 预留底部按钮空间 */
	}

	/* 表单卡片（统一阴影、圆角与内边距） */
	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 20px;
	}

	/* 基础信息区域（标签-值布局样式） */
	.form-section {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.form-row {
		display: flex;
		align-items: center;
	}

	.form-label {
		width: 64px;
		font-size: 14px;
		color: #6b7280;
	}

	.form-value {
		font-size: 14px;
		color: #1f2937;
	}

	/* 区域标题（统一字体与间距） */
	.section-title {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
		display: block;
	}

	/* 工资明细卡片（区分背景与内边距） */
	.salary-detail-card {
		background-color: #f9fafb;
		border-radius: 8px;
		padding: 14px;
	}

	/* 网格布局（双列分布与间距） */
	.grid {
		display: grid;
	}

	.grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.col-span-2 {
		grid-column: span 2 / span 2;
	}

	.gap-3 {
		gap: 12px;
	}

	/* 操作按钮区域（统一布局与间距） */
	.form-actions {
		display: flex;
		gap: 12px;
	}

	.salary-actions {
		justify-content: flex-start;
	}

	/* 底部固定按钮样式 */
	.fixed-bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		padding: 12px 16px;
		box-sizing: border-box;
		display: flex;
		gap: 12px;
		max-width: 750rpx;
		margin: 0 auto;
	}

	/* 按钮通用样式 */
	.btn {
		flex: 1;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	/* 编辑按钮样式 */
	.edit-btn {
		background-color: #1e88e5;
		color: #ffffff;
	}

	.edit-btn:active {
		background-color: #1976d2;
	}

	/* 删除按钮样式 */
	.delete-btn {
		background-color: #F44336;
		color: #ffffff;
	}

	.delete-btn:active {
		background-color: #d32f2f;
	}

	/* 主按钮样式（统一主色调与交互） */
	.submit-button {
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 6px;
		padding: 10px 20px;
		font-size: 14px;
		border: none;
		flex: 1;
		max-width: 180px;
	}

	/* 次要按钮样式（统一次要色调） */
	.secondary-button {
		background-color: #4CAF50;
		color: #ffffff;
		border-radius: 6px;
		padding: 10px 20px;
		font-size: 14px;
		border: none;
		flex: 1;
		max-width: 180px;
	}

	/* 弹窗容器（遮罩层样式） */
	.modal-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 50;
	}

	/* 弹窗隐藏状态 */
	.modal-container.hidden {
		display: none;
	}

	/* 弹窗内容（统一卡片与内边距） */
	.modal-content {
		background-color: #ffffff;
		border-radius: 8px;
		width: 100%;
		max-width: 320px;
		margin: 0 16px;
		padding: 16px;
	}

	/* 弹窗头部（标题样式） */
	.modal-header {
		padding-bottom: 8px;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	/* 弹窗主体（文本样式） */
	.modal-body {
		padding: 8px 0;
	}

	.modal-text {
		font-size: 14px;
		color: #374151;
		line-height: 1.5;
	}

	/* 弹窗底部（按钮布局） */
	.modal-footer {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		padding-top: 12px;
	}

	/* 取消按钮（统一灰色调） */
	.cancel-button {
		background-color: #e5e7eb;
		color: #374151;
		border-radius: 6px;
		border: none;
		font-size: 14px;
	}

	/* 危险按钮（统一红色调） */
	.danger-button {
		background-color: #F44336;
		color: #ffffff;
		border-radius: 6px;
		border: none;
		font-size: 14px;
	}

	/* 文本样式补充（统一字号与颜色） */
	.text-sm {
		font-size: 14px;
	}

	.text-lg {
		font-size: 18px;
	}

	.font-medium {
		font-weight: 500;
	}

	.text-gray-500 {
		color: #6b7280;
	}

	.text-gray-700 {
		color: #374151;
	}

	.text-primary {
		color: #1e88e5;
	}

	/* 间距补充（统一margin/padding） */
	.mb-4 {
		margin-bottom: 16px;
	}

	.mb-6 {
		margin-bottom: 24px;
	}

	.mt-2 {
		margin-top: 8px;
	}

	.p-3 {
		padding: 12px;
	}

	.pt-2 {
		padding-top: 8px;
	}

	.pb-3 {
		padding-bottom: 12px;
	}

	.py-4 {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	/* 边框样式（统一分隔线） */
	.border-t {
		border-top: 1px solid #e5e7eb;
	}

	.border-b {
		border-bottom: 1px solid #e5e7eb;
	}

	.border-gray-200 {
		border-color: #e5e7eb;
	}

	/* 弹性布局补充（对齐与分布） */
	.flex {
		display: flex;
	}

	.items-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-end {
		justify-content: flex-end;
	}

	/* 圆角样式（统一圆角大小） */
	.rounded {
		border-radius: 4px;
	}
</style>